import { Button, Modal, Space, TypographyText } from 'ant-design-vue'
import { defineComponent, ref } from 'vue'

import { cinemaApi, commonApi } from '@/apis'
import { RuleItem } from '@/apis/cinemaTypes'
import {
  type ProEditorProps,
  type ProEditorRef,
  type ProTableProps,
  type ProTableRef,
  ProEditor,
  ProTable
} from '@/components'
import { TABLE_FORMAT } from '@/constants'

export default defineComponent({
  name: 'MessageInfo',
  setup() {
    const tableRef = ref({} as ProTableRef)
    const nameTypes = ['金豆专区小程序', '营销小程序']
    const tableConfig = ref({
      fixedHeight: true,
      options: {
        border: true,
        align: 'center',
        columns: [
          {
            title: '小程序名称',
            field: 'name',
            formatter: ({ cellValue }) => {
              return nameTypes[cellValue]
            }
          },
          {
            title: '应用场景',
            field: 'scene'
          },
          {
            title: '消息通知类型',
            field: 'msgType'
          },
          {
            title: '小程序通知',
            field: 'minNoticeId'
          },
          {
            title: '短信通知',
            field: 'msgNoticeId'
          },
          {
            title: '状态',
            field: 'status',
            fixed: 'right',
            width: 100,
            slots: {
              default: 'status'
            }
          }
        ],

        proxyConfig: {
          props: {
            result: 'data'
          },
          ajax: {
            query: async () => {
              const data = [
                {
                  name: 0,
                  scene: '大牌点餐',
                  msgType: '商品出餐通知',
                  minNoticeId: '',
                  msgNoticeId: '',
                  status: 1
                },
                {
                  name: 0,
                  scene: '大牌点餐',
                  msgType: '商品退款到账通知',
                  minNoticeId: '',
                  msgNoticeId: '',
                  status: 1
                },
                {
                  name: 0,
                  scene: '电影票',
                  msgType: '电影票出票通知',
                  minNoticeId: '',
                  msgNoticeId: '',
                  status: 1
                },
                {
                  name: 0,
                  scene: '电影票',
                  msgType: '电影票退款到账通知',
                  minNoticeId: '',
                  msgNoticeId: '',
                  status: 1
                },
                {
                  name: 0,
                  scene: '电费充值',
                  msgType: '充值到账通知',
                  minNoticeId: '',
                  msgNoticeId: '',
                  status: 1
                },
                {
                  name: 0,
                  scene: '爱优腾芒会员',
                  msgType: '充值到账通知',
                  minNoticeId: '',
                  msgNoticeId: '',
                  status: 1
                },
                {
                  name: 0,
                  scene: '爱优腾芒会员',
                  msgType: '商品退款到账通知',
                  minNoticeId: '',
                  msgNoticeId: '',
                  status: 1
                },
                {
                  name: 0,
                  scene: '全部场景',
                  msgType: '卡券到期提醒',
                  minNoticeId: '',
                  msgNoticeId: '',
                  status: 1
                },
                {
                  name: 0,
                  scene: '金豆惠生活',
                  msgType: '下单成功通知',
                  minNoticeId: '',
                  msgNoticeId: '',
                  status: 1
                },
                {
                  name: 0,
                  scene: '金豆惠生活',
                  msgType: '退款到账通知',
                  minNoticeId: '',
                  msgNoticeId: '',
                  status: 1
                },
                {
                  name: 0,
                  scene: '金豆兑好礼',
                  msgType: '退款到账通知',
                  minNoticeId: '',
                  msgNoticeId: '',
                  status: 1
                },
                {
                  name: 0,
                  scene: '金豆兑好礼',
                  msgType: '发货通知',
                  minNoticeId: '',
                  msgNoticeId: '',
                  status: 1
                },
                {
                  name: 1,
                  scene: '优惠券',
                  msgType: '优惠券绑定手机验证码',
                  minNoticeId: '',
                  msgNoticeId: '',
                  status: 1
                },
                {
                  name: 1,
                  scene: '优惠券',
                  msgType: '优惠券领取通知',
                  minNoticeId: '',
                  msgNoticeId: '',
                  status: 1
                },
                {
                  name: 1,
                  scene: '拼团',
                  msgType: '拼团成功通知',
                  minNoticeId: '',
                  msgNoticeId: '',
                  status: 1
                },
                {
                  name: 1,
                  scene: '签到',
                  msgType: '签到提醒通知',
                  minNoticeId: '',
                  msgNoticeId: '',
                  status: 1
                }
              ]
              return data
            }
          }
        }
      }
    } as ProTableProps)

    return {
      tableRef,
      tableConfig
    }
  },
  render() {
    return (
      <div>
        <ProTable
          ref="tableRef"
          v-slots={{
            status: ({ row }) => {
              return (
                <Space>
                  {row.status == 0 ? (
                    <TypographyText type="danger">未开发</TypographyText>
                  ) : (
                    <TypographyText type="success">已上线</TypographyText>
                  )}
                </Space>
              )
            }
          }}
          {...this.tableConfig}
        />
      </div>
    )
  }
})
